<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event函数</title>
    <style>
        .btn{
            border: 1px solid #4caf50;
            min-width: 300px;
            padding: 8px 12px;
            color: #000;
            background: white;
            outline: dotted red 2px;
        }
        .btn:active{
            background: #4caf50;
            color: orange;
        }
    </style>
</head>
<body>
    <div>
        <button class="btn">点我</button>
    </div>
    <script>
        /*将Event构造函数换成CustomEvent也是可以的*/
        var afterClick = new Event('afterclick');

        var btnEle = document.querySelector('.btn');

        btnEle.addEventListener('afterclick',function () {
            alert('我很晚才出现');
        });

        btnEle.onclick = function () {
            alert('我被点击');
            /*触发自定义事件*/
            this.dispatchEvent(afterClick);
        }
    </script>
</body>
</html>